<template>
    <div class="resume-container">
        <!-- 亮点分析 -->
        <section class="section">
            <h2 class="section-title"><i class="el-icon-caret-right" style="color: rgb(22,135,254);"></i>简历亮点</h2>
            <div class="row-display">
                <p>亮点信息</p><el-badge v-if="resumePaint.profiler_result && resumePaint.profiler_result.highlights"
                    class="item" type="primary" :value="resumePaint.profiler_result.highlights.length" />
            </div>
            <div v-for="highlight in resumePaint.profiler_result.highlights" :key="highlight.content"
                class="row-display">
                <span class="dot"></span>
                <p v-html="highlightBrackets(highlight.content)"></p>
            </div>
            <div class="row-display">
                <p>风险信息</p><el-badge v-if="resumePaint.profiler_result && resumePaint.profiler_result.risks"
                    class="item" type="warning" :value="resumePaint.profiler_result.risks.length" />
            </div>
            <div v-for="risk in resumePaint.profiler_result.risks" :key="risk.content" class="row-display">
                <span class="dot"></span>
                <p v-html="highlightBrackets(risk.content)"></p>
            </div>
            <div class="row-display">
                <p>智能评估</p>
            </div>
            <div class="row-display">
                <span class="dot"></span>
                <p>综合工作经历、教育背景、工作年限、行业地狱等因素，该候选人的市场薪资约为<span class="highlight-blue">{{
                    resumePaint.profiler_result.predicted_salary }}</span>/月</p>
            </div>
        </section>

        <!-- 简历标签 -->
        <section class="section">
            <h2 class="section-title"><i class="el-icon-caret-right" style="color: rgb(22,135,254);"></i>简历标签</h2>
            <div class="row-display">
                <p><i class="el-icon-collection-tag" style="color: #FBC82D;"></i>&nbsp;基本标签</p>
            </div>
            <div class="row-display">
                <span class="dot"></span>基本：
                <el-tag v-for="bas in resumePaint.profiler_result.basic" :key="bas.tag" :style="{
                    color: '#007EC6',  /* 文字颜色 */
                    borderColor: '#007EC6',  /* 边框颜色 */
                    backgroundColor: '#ECF7FD',  /* 背景透明 */
                    borderWidth: '1px',  /* 边框宽度 */
                    borderStyle: 'solid',  /* 边框样式 */
                    fontSize: '14px'
                }">
                    {{ bas.tag }}
                </el-tag>
            </div>
            <div class="row-display">
                <p><i class="el-icon-collection-tag" style="color: #5FCD57;"></i>&nbsp;教育标签</p>
            </div>
            <div class="row-display">
                <span class="dot"></span>基本：
                <el-tag v-for="item in basicTags" :key="item.tag" :style="{
                    color: '#4F9D93',  /* 文字颜色 */
                    borderColor: '#4F9D93',  /* 边框颜色 */
                    backgroundColor: '#ECF4EB',  /* 背景透明 */
                    borderWidth: '1px',  /* 边框宽度 */
                    borderStyle: 'solid',  /* 边框样式 */
                    fontSize: '14px'
                }">{{ item.tag }}</el-tag>
            </div>
            <div class="row-display">
                <span class="dot"></span>专业：
                <el-tag v-for="item in majorTags" :key="item.tag" :style="{
                    color: '#4F9D93',  /* 文字颜色 */
                    borderColor: '#4F9D93',  /* 边框颜色 */
                    backgroundColor: '#ECF4EB',  /* 背景透明 */
                    borderWidth: '1px',  /* 边框宽度 */
                    borderStyle: 'solid',  /* 边框样式 */
                    fontSize: '14px'
                }">{{ item.tag }}</el-tag>
            </div>
            <div class="row-display">
                <span class="dot"></span>学校：
                <el-tag v-for="item in collegeTags" :key="item.tag" :style="{
                    color: '#4F9D93',  /* 文字颜色 */
                    borderColor: '#4F9D93',  /* 边框颜色 */
                    backgroundColor: '#ECF4EB',  /* 背景透明 */
                    borderWidth: '1px',  /* 边框宽度 */
                    borderStyle: 'solid',  /* 边框样式 */
                    fontSize: '14px'
                }">{{ item.tag }}</el-tag>
            </div>
            <div class="row-display">
                <p><i class="el-icon-collection-tag" style="color: #37C3B7;"></i>&nbsp;职业标签</p>
            </div>
            <div class="row-display">
                <span class="dot"></span>基本：
                <el-tag v-for="bas in resumePaint.profiler_result.job_exp" :key="bas.tag" hit=false :style="{
                    color: '#007EC6',  /* 文字颜色 */
                    borderColor: '#007EC6',  /* 边框颜色 */
                    backgroundColor: '#ECF7FD',  /* 背景透明 */
                    borderWidth: '1px',  /* 边框宽度 */
                    borderStyle: 'solid',  /* 边框样式 */
                    fontSize: '14px'
                }">
                    {{ bas.tag }}
                </el-tag>
            </div>
            <div class="row-display">
                <p><i class="el-icon-collection-tag" style="color: #FBC82D;"></i>&nbsp;其他标签</p>
            </div>
            <div class="row-display">
                <span class="dot"></span>语言：
                <el-tag v-for="bas in resumePaint.profiler_result.skills.languages" :key="bas.tag" :style="{
                    color: '#84740A',  /* 文字颜色 */
                    borderColor: '#84740A',  /* 边框颜色 */
                    backgroundColor: '#FBF6D2',  /* 背景透明 */
                    borderWidth: '1px',  /* 边框宽度 */
                    borderStyle: 'solid',  /* 边框样式 */
                    fontSize: '14px'
                }">
                    {{ bas.tag }}
                </el-tag>
            </div>
            <div class="row-display">
                <span class="dot"></span>证书：
                <el-tag v-for="bas in resumePaint.profiler_result.skills.certificates" :key="bas.tag" :style="{
                    color: '#84740A',  /* 文字颜色 */
                    borderColor: '#84740A',  /* 边框颜色 */
                    backgroundColor: '#FBF6D2',  /* 背景透明 */
                    borderWidth: '1px',  /* 边框宽度 */
                    borderStyle: 'solid',  /* 边框样式 */
                    fontSize: '14px'
                }">
                    {{ bas.tag }}
                </el-tag>
            </div>
            <div class="row-display">
                <p><i class="el-icon-collection-tag" style="color: #F24736;"></i>&nbsp;技能标签</p>
            </div>
            <div class="row-display">
                <span class="dot"></span>专业技能：
                <el-tag v-for="bas in resumePaint.profiler_result.skills.job_skills" :key="bas.tag" :style="{
                    color: '#972415',  /* 文字颜色 */
                    borderColor: '#972415',  /* 边框颜色 */
                    backgroundColor: '#FCEBE9',  /* 背景透明 */
                    borderWidth: '1px',  /* 边框宽度 */
                    borderStyle: 'solid',  /* 边框样式 */
                    fontSize: '14px'
                }">
                    {{ bas.tag }}
                </el-tag>
            </div>
            <div class="row-display">
                <span class="dot"></span>软技能：
                <el-tag v-for="bas in resumePaint.profiler_result.skills.soft_skills" :key="bas.tag" :style="{
                    color: '#972415',  /* 文字颜色 */
                    borderColor: '#972415',  /* 边框颜色 */
                    backgroundColor: '#FCEBE9',  /* 背景透明 */
                    borderWidth: '1px',  /* 边框宽度 */
                    borderStyle: 'solid',  /* 边框样式 */
                    fontSize: '14px'
                }">
                    {{ bas.tag }}
                </el-tag>
            </div>


            <div class="row-display">
                <p>风险信息</p><el-badge v-if="resumePaint.profiler_result && resumePaint.profiler_result.risks"
                    class="item" type="warning" :value="resumePaint.profiler_result.risks.length" />
            </div>
            <div v-for="risk in resumePaint.profiler_result.risks" :key="risk.content" class="row-display">
                <span class="dot"></span>
                <p v-html="highlightBrackets(risk.content)"></p>
            </div>
            <div class="row-display">
                <p>智能评估</p>
            </div>
            <div class="row-display">
                <span class="dot"></span>
                <p>综合工作经历、教育背景、工作年限、行业地狱等因素，该候选人的市场薪资约为<span class="highlight-blue">{{
                    resumePaint.profiler_result.predicted_salary }}</span>/月</p>
            </div>
        </section>

        <!-- 技能分析 -->
        <section class="section-skill">
            <h2 class="section-title">技能分析</h2>
            <el-row :gutter="20">
                <el-col :span="24" :sm="6">
                    <el-card shadow style="max-height: 400px;overflow-y: auto;">
                        <h3>专业技能</h3>
                        <div v-for="skill in resumePaint.profiler_result.skills.job_skills" :key="skill.tag"
                            class="skill-item">
                            <span class="skill-name">{{ skill.tag }}</span>
                            <el-tag type="primary" size="small">{{ skill.weight }}%</el-tag>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="24" :sm="6">
                    <el-card shadow style="max-height: 400px;overflow-y: auto;">
                        <h3>软技能</h3>
                        <el-tag v-for="skill in resumePaint.profiler_result.skills.soft_skills" :key="skill.tag"
                            class="tag" type="info" style="margin: 4px 6px 4px 0">
                            {{ skill.tag }}
                        </el-tag>
                    </el-card>
                </el-col>

                <el-col :span="24" :sm="6">
                    <el-card shadow style="max-height: 400px;overflow-y: auto;">
                        <h3>语言能力</h3>
                        <el-tag v-for="lang in resumePaint.profiler_result.skills.languages" :key="lang.tag" class="tag"
                            type="success" style="margin: 4px 6px 4px 0">
                            {{ lang.tag }}
                        </el-tag>
                    </el-card>
                </el-col>

                <el-col :span="24" :sm="6">
                    <el-card shadow style="max-height: 400px;overflow-y: auto;">
                        <h3>证书资质</h3>
                        <el-tag v-for="cert in resumePaint.profiler_result.skills.certificates" :key="cert.tag"
                            class="tag" type="warning" style="margin: 4px 6px 4px 0">
                            {{ cert.tag }}
                        </el-tag>
                    </el-card>
                </el-col>
            </el-row>
        </section>

        <!-- 工作稳定性 -->
        <section class="section">
            <h2 class="section-title">工作稳定性</h2>
            <el-row>
                <el-col :span="12">平均工作时长：</el-col>
                <el-col :span="12">{{ resumePaint.profiler_result.stability.average_job_time }} 个月</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">稳定性评价：</el-col>
                <el-col :span="12">{{ resumePaint.profiler_result.stability.job_stability }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">长期工作数量：</el-col>
                <el-col :span="12">{{ resumePaint.profiler_result.stability.long_job_time_num }} 段</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">短期工作数量：</el-col>
                <el-col :span="12">{{ resumePaint.profiler_result.stability.short_job_time_num }} 段</el-col>
            </el-row>
        </section>

        <!-- 能力评估 -->
        <section class="section">
            <h2 class="section-title">能力评估</h2><br>
            <el-card shadow>
                <div ref="capacityChart" class="chart-container"></div>
            </el-card>
        </section>

        <!-- 推荐职位 -->
        <!-- <section class="section">
            <h2 class="section-title">推荐职位</h2>
            <el-row :gutter="20">
                <el-col :span="24" :sm="8" v-for="pos in resumePaint.profiler_result.predicted_pos_types" :key="pos.c3">
                    <el-card shadow class="predicted-item">
                        <h4>{{ pos.c1 }} - {{ pos.c2 }}</h4>
                        <p>{{ pos.c3 }}</p>
                        <el-progress :percentage="pos.weight" :stroke-width="8" status="success"></el-progress>
                    </el-card>
                </el-col>
            </el-row>
        </section> -->

        <!-- 推荐行业 -->
        <!-- <section class="section">
            <h2 class="section-title">推荐行业</h2>
            <el-row :gutter="20">
                <el-col :span="24" :sm="8" v-for="industry in resumePaint.profiler_result.predicted_industries_c2"
                    :key="industry.c2">
                    <el-card shadow class="predicted-item">
                        <h4>{{ industry.c1 }}</h4>
                        <p>{{ industry.c2 }}</p>
                        <el-progress :percentage="industry.weight" :stroke-width="8" status="warning"></el-progress>
                    </el-card>
                </el-col>
            </el-row>
        </section> -->
    </div>
</template>

<script>
import echarts from 'echarts';

export default {
    name: 'resumePaint',
    props: {
        resumePaint: {
            type: Object,
            required: true
        }
    },
    mounted() {
        // 示例：可以在这里使用 this.resumePaint
        console.log('简历画像数据：', this.resumePaint);
    },
    data() {
        return {
            numOfHighlights: 0,
            resumePaint: {
                status: {
                    message: 'success',
                    code: 200
                },
                result: {},
                profiler_result: {
                    basic: [
                        { tag: "女", type: "gender" },
                        { tag: "30-35岁", type: "age" },
                        { tag: "10年以上经验", type: "experience" }
                    ],
                    education: [
                        { tag: "学士学历", type: "degree" },
                        { tag: "旅游管理专业", type: "major" },
                        { tag: "辽宁大学", type: "college" },
                        { tag: "211院校", type: "college_level" }
                    ],
                    // 根据简历工作经历内容，提取职位、智能、行业、公司类型等标签
                    job_exp: [
                        { tag: "旅游平台", type: "position" },
                        { tag: "网站编辑和美工", type: "position" },
                        { tag: "设计-互联网设计-美工/电商设计师", type: "position_type" },
                        { tag: "运营-电商运营-国内电商运营", type: "position_type" },
                        { tag: "酒店/旅游-旅游-旅游产品销售", type: "position_type" },
                        { tag: "服务业-美容/保健", type: "industry" }
                    ],
                    skills: {
                        job_skills: [
                            { tag: "宝贝描述", type: "互联网设计", weight: 83 },
                            { tag: "处理图片", type: "业务运营", weight: 78 },
                            { tag: "产品图片", type: "互联网设计", weight: 78 }
                        ],
                        soft_skills: [
                            { tag: "文字表达能力" },
                            { tag: "团队合作" }
                        ],
                        hobbies: [
                            { tag: "旅游" },
                            { tag: "音乐" }
                        ],
                        languages: [
                            { tag: "英语" },
                            { tag: "日语" }
                        ],
                        certificates: [
                            { tag: "导游资格证" },
                            { tag: "大学英语4级" },
                            { tag: "大学英语6级" }
                        ],
                        awards: []
                    },
                    stability: {
                        average_job_time: 43.0,
                        average_job_type_time: 43.0,
                        average_industry_time: 43.0,
                        long_job_time_num: 1,
                        short_job_time_num: 1,
                        job_stability: "稳定"
                    },
                    capacity: {
                        education: 30,
                        honor: 10,
                        language: 70,
                        management: 10,
                        job_exp: 30,
                        social_exp: 10
                    },
                    predicted_pos_types: [
                        { c1: "设计", c2: "互联网设计", c3: "美工/电商设计师", weight: 17 },
                        { c1: "运营", c2: "电商运营", c3: "国内电商运营", weight: 16 },
                        { c1: "酒店/旅游", c2: "旅游", c3: "旅游产品销售", weight: 8 }
                    ],
                    predicted_industries_c1: [
                        { c1: "服务业", weight: 53 },
                        { c1: "贸易/消费/制造/营运", weight: 26 },
                        { c1: "房地产/建筑", weight: 20 },
                        { c1: "专业服务/教育/培训", weight: 0 },
                        { c1: "能源/环保/化工", weight: 0 },
                        { c1: "政府/非营利组织/其他", weight: 0 },
                        { c1: "广告/媒体", weight: 0 },
                        { c1: "制药/医疗", weight: 0 },
                        { c1: "会计/金融/银行/保险", weight: 0 },
                        { c1: "物流/运输", weight: 0 },
                        { c1: "计算机/互联网/通信/电子", weight: 0 }
                    ],
                    predicted_industries_c2: [
                        { c1: "服务业", c2: "美容/保健", weight: 9 },
                        { c1: "贸易/消费/制造/营运", c2: "批发/零售", weight: 8 },
                        { c1: "服务业", c2: "娱乐/休闲/体育", weight: 7 },
                        { c1: "房地产/建筑", c2: "家居/室内设计/装潢", weight: 6 }
                    ],
                    predicted_salary: "5-10K",
                    highlights: [
                        {
                            title: "工作稳定",
                            content: "【工作稳定】：平均每段工作经历持续【43】个月，且存在【1】段工作经历2年以上",
                            type: "job_exp"
                        },
                        {
                            title: "",
                            content: "在【国内电商运营】职能领域和【美容/保健】行业里有【较丰富】工作经历",
                            type: "job_exp"
                        },
                        {
                            title: "211院校",
                            content: "【较不错】的教育背景：学士学历，毕业于【211院校】",
                            type: "education"
                        }
                    ],
                    risks: [
                        {
                            title: "工作不稳定",
                            content: "【工作不稳定】：平均每段工作经历仅持续【10】个月，且存在【1】段工作经历1年以下",
                            type: "job_exp"
                        },
                        {
                            title: "空档期",
                            content: "【空档期】：候选人在 2014.06~2015.07 期间共存在【13个月】的职业空档期",
                            type: "job_exp"
                        }
                    ]
                }
            }
        };
    },
    computed: {
        basicTags() {
            return this.resumePaint.profiler_result.education.filter(item => item.type === "degree");
        },
        majorTags() {
            return this.resumePaint.profiler_result.education.filter(item => item.type === "major");
        },
        collegeTags() {
            return this.resumePaint.profiler_result.education.filter(item => item.type === "college" || item.type === "college_level");
        }
    },
    mounted() {
        this.initCapacityChart();
        window.addEventListener('resize', this.resizeChart);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.resizeChart);
        if (this.chart) {
            this.chart.dispose();
        }
    },
    methods: {
        initCapacityChart() {
            this.chart = echarts.init(this.$refs.capacityChart);
            const capacity = this.resumePaint.profiler_result.capacity || {};
            const option = {
                title: {
                    text: '能力雷达图',
                    left: 'center',
                    textStyle: {
                        color: '#333',
                        fontSize: 16
                    }
                },
                radar: {
                    center: ['50%', '54.6%'],
                    indicator: [
                        { name: '教育背景', max: 100 },
                        { name: '荣誉奖项', max: 100 },
                        { name: '语言能力', max: 100 },
                        { name: '管理经验', max: 100 },
                        { name: '工作经验', max: 100 },
                        { name: '社会经验', max: 100 }
                    ],
                    splitArea: {
                        areaStyle: {
                            color: ['rgba(102, 126, 234, 0.1)', 'rgba(102, 126, 234, 0.05)']
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(102, 126, 234, 0.3)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(102, 126, 234, 0.3)'
                        }
                    }
                },
                series: [{
                    type: 'radar',
                    data: [{
                        value: [
                            capacity.education || 0,
                            capacity.honor || 0,
                            capacity.language || 0,
                            capacity.management || 0,
                            capacity.job_exp || 0,
                            capacity.social_exp || 0
                        ],
                        areaStyle: {
                            color: 'rgba(102, 126, 234, 0.3)'
                        },
                        lineStyle: {
                            color: '#667eea'
                        },
                        itemStyle: {
                            color: '#667eea'
                        }
                    }]
                }]
            };
            this.chart.setOption(option);
        },
        resizeChart() {
            if (this.chart) {
                this.chart.resize();
            }
        },
        highlightBrackets(content) {
            // 替换所有【xxx】为 <span class="highlight-blue">xxx</span>
            return content.replace(/【(.*?)】/g, '<span class="highlight-blue">【$1】</span>');
        }
    }
};
</script>

<style scoped>
.resume-container {
    /* max-width: 1200px; */
    width: 100%;
    margin: 20px auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: white;
    /* border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
    padding: 20px;
}

.header-title {
    font-weight: 300;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.header-subtitle {
    font-weight: 400;
    font-size: 1.2rem;
}

.section {
    margin-bottom: 40px;
    line-height: 2;
}

.section-skill {
    margin-bottom: 40px;
    line-height: 2;

}

.section-title {
    font-size: 1.2rem;
    width: 100%;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #dadada;
    display: inline-block;
}

.tag {
    font-size: 1rem;
    margin: 5px 0;
    display: inline-block;
}

.skill-item {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    align-items: center;
}

.stability-card {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 20px;
    border-radius: 15px;
}

.salary-card {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: #667eea;
    padding: 30px 0;
    border-radius: 15px;
    background: #f8f9fa;
}

.chart-container {
    height: 330px;
}

.predicted-item {
    padding: 15px;
    border-radius: 10px;
    background: #f8f9fa;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
}


.risk-card {
    background: linear-gradient(135deg, #fa709a, #fee140);
    padding: 20px;
    border-radius: 15px;
}

.row-display {
    display: flex;
    flex-direction: row;
    gap: 3px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: rgb(22, 135, 254);
    border-radius: 2.5px;
    margin-right: 6px;
    position: relative;
    /* top: -3px; */
}

::v-deep .highlight-blue {
    color: #3b82f6;
    font-weight: 500;
}
</style>
